<template>
    <div class="pagestyle">
        <div class="fbc">
            <el-form :model="state.queryParams" ref="queryRef" :inline="true" label-width="68px">
                <el-form-item label="模板类型" prop="configType">
                    <div class="fac">
                        <el-select v-model="state.form.templateType" placeholder="请选择" clearable>
                            <el-option v-for="dict in state.tempType" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="模板名称" prop="configType">
                    <el-input v-model="state.form.templateName" placeholder="请输入模板名称搜索" clearable style="width: 240px"
                        :suffix-icon="Search" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getTempListClick">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="btn_box">
                <el-button type="primary" link @click="addBtn">  <el-icon style="margin-right: 2px;">
            <svg-icon  icon-class="addtotal" />
          </el-icon>新增</el-button>
                <el-button type="primary" link @click="openAdd(5)">  <el-icon style="margin-right: 2px;">
            <svg-icon  icon-class="rizhi" />
          </el-icon>日志</el-button>
                <div class="type_box" v-if="state.showAdd" @mouseleave="state.showAdd = false">
                    <div class="item" @click="openAdd(1)">新增分站模板</div>
                    <div class="item" @click="openAdd(2)">新增电源模板</div>
                    <div class="item" @click="openAdd('A')">新增分析模板</div>
                    <div class="item" @click="openAdd('B')">新增公式</div>
                </div>
            </div>
        </div>
        <Waterfall :list="state.mobanList" class="pets" :breakpoints="state.breakpoints">
            <template #default="{ item, url, index }">
                {{ url }}
                <div class="card_box" :class="{type3:item.type=='A',type4:item.type=='B'}">
                    <p class="fbc">
                        <span>
                            <span v-if="item.type=='A'" :class="{type3:item.type=='A',type4:item.type=='B'}">分析</span>
                            <span v-if="item.type=='B'" :class="{type3:item.type=='A',type4:item.type=='B'}">公式</span>
                            <em v-if="item.type=='A'">{{ item.name }}</em>
                            <em v-if="item.type=='B'">{{ item.templateName }}</em>
                        </span>
                        <el-button link type="primary" @click="editClick(item)">编辑</el-button>
                    </p>
                    <div class="desc" v-if="item.type=='A'">
                        <p><span>原因</span><span>{{item.reason}}</span></p>
                        <p><span>处理措施</span><span>{{item.measure}}</span></p>
                        <p><span>处理结果</span><span>{{item.result}}</span></p>
                    </div>
                    <div class="desc" v-if="item.type=='B'">
                        <p><span>类型</span><span>{{item.outcome}}</span></p>
                        <p><span>公式</span><span>{{item.expression}}</span></p>
                    </div>
                </div>
            </template>
        </Waterfall>
        <!-- 新增弹框 -->
        <el-drawer v-model="state.addModal" direction="rtl" size="40%" close-on-click-modal :modal="true"
            @close="state.formData = {}">
            <template #header="{ close, titleId, titleClass }">
                <h4 class="mask_sub_title">
                    <svg-icon class-name="search-icon" icon-class="dot" /><span>{{ state.addModalTitle}}</span></h4>
            </template>
            <el-radio-group v-model="state.tabradio" size="small" v-if="state.mobanType !=5">
                <el-radio-button label="detail" value="detail">模板详情</el-radio-button>
                <el-radio-button label="log" value="log">使用日志</el-radio-button>
            </el-radio-group>
            <temconfigCom  :isShow="state.isShow" :mobanType="state.mobanType" :tabradio="state.tabradio" :editId="state.editId"
                @addModal="cancel"></temconfigCom>
        </el-drawer>
        <!-- 删除提示 -->
        <el-dialog v-model="state.delTip" width="260px">
            <div class="del_box">
                <img src="@/assets/images/删除模板.png" alt="">
                <div class="fonts">
                    <div class="one">是否删除当前模板？</div>
                    <div class="two">删除后不可恢复！</div>
                </div>
                <div>
                    <el-button style="width:72px;margin:0 20px 0 0;" @click="state.delTip = false">取消</el-button>
                    <el-button style="width:72px;" type="danger" @click="confirmDel">删除</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
    import list_controller from "@/components/commonCom/list_controller";
    import {
        computed,
        reactive,
        provide,
        onMounted,
        inject
    } from "vue";
    import {
        ElMessage
    } from "element-plus";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import
    temconfigCom
    from '@/components/commonCom/temconfigCom';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import {
        template
    } from "lodash";
    import {
        LazyImg,
        Waterfall
    } from "vue-waterfall-plugin-next";
    import "vue-waterfall-plugin-next/dist/style.css";
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    components: {
        list_controller,
        temconfigCom
    }
    const tableRef = ref(null)
    let state = reactive({
        isShow:false,
        breakpoints: {
            1920: { //当屏幕宽度小于等于1200
                rowPerView: 3,
            },
            1200: { //当屏幕宽度小于等于1200
                rowPerView: 4,
            },
            800: { //当屏幕宽度小于等于800
                rowPerView: 3,
            },
            500: { //当屏幕宽度小于等于500
                rowPerView: 2,
            }
        },
        mobanType: 1,
        queryParams: {}, //搜索参数
        mobanList: [],
        addModal: false,
        editModal: false,
        addModalTitle: '分站模板',
        tabradio: 'detail',
        formData: {},
        tableData: [{
            name: 'Test1'
        }],
        editId: undefined,
        // 表单
        formRef: null,
        showAdd: false,
        templateType: [{
            label: ''
        }],
        tempObj: {},
        tempType: [{
            label: '分析模板',
            value: 'A'
        }, {
            label: '公式',
            value: 'B'
        }],
        form: {},
        delTip: false,
        delId: 0
    })
    // 新增行
    function btnClick() {
        state.tableData.push({})
    }

    function editClick(item) {
        state.editId = item.id
        state.addModal = true
        state.mobanType = item.type
        state.tabradio='detail'
        if (item.type == 1) {
            state.addModalTitle = '分站模板'
        } else if (item.type == 2) {
            state.addModalTitle = '电源模板'
        } else if (item.type == 'A') {
            state.addModalTitle = '分析模板'
        } else {
            state.addModalTitle = '虚拟测点公式'
        }
    }
    const isActiveStatus = (row) => {
        const $table = tableRef.value
        if ($table) {
            return $table.isEditByRow(row)
        }
    }
    const editRowEvent = (row) => {
        const $table = tableRef.value
        if ($table) {
            $table.setEditRow(row)
        }
    }
    const saveRowEvent = (row) => {
        const $table = tableRef.value
        if ($table) {
            $table.clearEdit().then(() => {

            })
        }
    }
    const cancelRowEvent = (row) => {
        const $table = tableRef.value
        if ($table) {
            $table.clearEdit().then(() => {
                // 还原行数据
                $table.revertData(row)
            })
        }
    }
    // 新增按钮
    function addBtn(row) {
        state.showAdd = true
        state.editId=undefined
    }

    function cancel() {
        state.addModal = false
        getTempList()
    }

    function getTempListClick() {
        getTempList()
    }
    const getTempList = () => {
        axios.post('template/expression/obtainAll', state.form).then(res => {
            state.mobanList = res.data
        })
    }
    // 打开新增弹窗
    const openAdd = (n) => {
        state.addModal = true
        state.mobanType = n
        state.editId = undefined
        state.tabradio='detail'
        state.isShow=!state.isShow
        if (n == 1) {
            state.addModalTitle = '分站模板'
        } else if (n == 2) {
            state.addModalTitle = '电源模板'
        } else if (n == 'A') {
            state.addModalTitle = '分析模板'
        } else if (n == 'B') {
            state.addModalTitle = '公式'
        } else if (n == 5) {
            state.addModalTitle = '使用日志'
        }
    }

    // 删除模板
    const delTemp = (id) => {
        state.delTip = true
        state.delId = id
    }
    // 确认删除
    const confirmDel = () => {
        if (state.mobanType == 'A') {
            axios.post('/template/analysis/delete', {
                id: state.delId
            }).then(res => {
                if (res.code == 200) {
                    getTempList()
                    state.delTip = false
                    proxy.$modal.msgSuccess(res.msg);
                }
            })
        } else if (state.mobanType == 'B') {
            axios.post(`/template/expression/deleteExpressionById/${state.delId}`).then(res => {
                if (res.code == 200) {
                    getTempList()
                    state.editModal = false
                    state.delTip = false
                    proxy.$modal.msgSuccess(res.msg);
                }
            })
        }
    }
    // 重置
    const reset = () => {
        state.form = {}
        getTempList()
    }
    onMounted(() => {
        getTempList()
    })
</script>
<style scoped lang="scss">
    .del_box {
        padding: 0 20px;
        height: 235px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        img {
            width: 100px;
        }

        .fonts {
            color: rgba(62, 70, 79, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .one {
                font-size: 16px;
                font-weight: 700;
            }

            .two {
                font-size: 14px;
                font-weight: 400;
            }
        }
    }

    .form_footer {
        display: flex;
        justify-content: space-between;
    }

    ::v-deep .el-textarea__inner {
        min-height: 91px !important;
    }

    .pagestyle {
        padding: 10px;
        overflow-y: auto;
    }

    .card_box {
        padding: 1px 16px 16px;
        border-radius: 4px;

        &.type1 {
            background-color: rgba(10, 170, 220, 0.08);
        }

        &.type2 {
            background-color: rgba(47, 173, 104, 0.08);
        }

        &.type3 {
            background-color: rgba(171, 122, 224, 0.08);
        }

        &.type4 {
            background-color: rgba(71, 137, 230, 0.08);
        }

        .fbc {
            span {
                font-size: 12px;
                border-radius: 2px;
                padding: 4px;

                &.type1 {
                    background-color: rgba(10, 170, 220, 0.16);
                    color: rgba(10, 170, 220, 1);
                }

                &.type2 {
                    background-color: rgba(47, 173, 104, 0.16);
                    color: rgba(47, 173, 104, 1);
                }

                &.type3 {
                    background-color: rgba(171, 122, 224, 0.16);
                    color: rgba(171, 122, 224, 1);
                }

                &.type4 {
                    background-color: rgba(71, 137, 230, 0.16);
                    color: rgba(71, 137, 230, 1);
                }
            }

            em {
                font-style: normal;
                font-size: 14px;
                font-weight: 700;
                margin-left: 8px;
            }
        }

        .desc {
            border-radius: 4px;
            background: rgba(255, 255, 255, 1);
            padding: 16px;
            font-size: 14px;

            p {
                span {
                    display: inline-block;

                    &:nth-child(1) {
                        min-width: 60px;
                        color: rgba(62, 70, 79, 0.6);
                    }

                    &.use {
                        color: rgba(64, 158, 255, 1);
                        border-bottom: 1px solid rgba(64, 158, 255, 1);
                    }
                }
            }
        }
    }

    .pets {
        width: 100% !important;
        margin: 0 auto;
        display: flex;
        // flex-wrap: wrap;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .card {
        width: 32%;
        margin: 10px;
        border-radius: 5px;
    }

    .btn_box {
        position: relative;

        .type_box {
            position: absolute;
            top: 27px;
            left: -37px;
            z-index: 9;
            padding: 4px 0;
            width: 116px;
            height: 136px;
            background-color: #fff;

            .item {
                width: 100%;
                height: 32px;
                font-size: 14px;
                color: rgba(62, 70, 79, 1);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .item:hover {
                cursor: pointer;
                background-color: #f0f3f4;
            }
        }
    }
</style>